(function () {
  let data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  let option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["预期销售额", "实际销售额"],
      right: "10%", // 距离右侧10%
      textStyle: {
        // 图例上的文字颜色
        color: "#4c9bfd", // 浅蓝色
      },
      left: "25%", // 距离左侧25%
    },
    grid: {
      // 直角坐标系内绘图网格
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
      show: true,
      borderColor: "#012f4a",
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        // 去掉刻度
        show: false,
      },
      axisLabel: {
        // 文字颜色
        color: "#4c9bfd",
      },
      axisLine: {
        // xAxis轴-垂直线段
        lineStyle: {
          color: "#012f4a",
        },
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        // 坐标轴刻度相关设置
        show: false, // 不显示坐标轴刻度
      },
      axisLabel: {
        // 文字颜色
        color: "#4c9bfd",
      },
      axisLine: {
        // y轴-垂直线段
        lineStyle: {
          color: "#012f4a",
        },
      },
      splitLine: {
        //  轴线相关设置
        lineStyle: {
          color: "#012f4a", // 坐标轴线(分割线)的颜色
        },
      },
    },
    series: [
      {
        name: "预期销售额",
        type: "line",
        stack: "总量",
        smooth: true,
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      },
      {
        name: "实际销售额",
        type: "line",
        stack: "总量",
        smooth: true,
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
    ],
  };
  let myChart = echarts.init(document.querySelector(".sales .line"));
  myChart.setOption(option);
  //点击事件
  $('.sales a').on('click',function(){
      let dataType=$(this).attr('data-type')
      let newData=data[dataType]
      $(this).addClass('active').siblings().removeClass()
option.series[0].data=newData[0]
option.series[1].data=newData[1]
myChart.setOption(option);
  })
//   鼠标移入事件
$('.sales').hover(function () {
  clearInterval(t)
},function(){
salesInterval()
})
//   定时器
let nowIndex=0
let t
function salesInterval() {
  t= setInterval(()=>{
    nowIndex++
    if(nowIndex===$('.sales a').length){
      nowIndex=0
    }
    $('.sales a').eq(nowIndex).trigger('click')
  },2000)
}
salesInterval()

  
  window.addEventListener('resize',function(){
    myChart.resize();
})
})();
